<template>
  <view class="index">
    <view class="header">
      <view class="left"><uni-icons type="back" size="30" color="#ffb612" @click="back"></uni-icons></view>
      <view class="title">我的设备</view>
      <view class="right">
        <text v-show="!isShowCheckBox"><uni-icons type="plus-filled" size="30" color="#ffb612" @click="goAdd"></uni-icons></text>
        <text v-show="!isShowCheckBox"><uni-icons type="minus-filled" size="30" color="#ffb612" @click="showDel"></uni-icons></text>
        <text class="del" style="color: #dd5c25; padding-bottom: 10px;" v-show="isShowCheckBox" @click="isDelFn">删除</text>
      </view>
    </view>
    <view class="new_box" style="margin-top:40upx;">
      <view class="Basic-information" style="color: #fff;padding-left: 20px;" v-if="!list.length">暂无设备~~</view>
      <view class="bbox">
        <checkbox-group @change="getCheckChange" selectedColor="#ffb612">
          <view class="list-box" v-for="(item, index) in list" :key="index">
            <view class="list-ed" style="display: flex;">
              <!-- <image class="list-img" src="../../static/logo.png" mode="aspectFill"></image> -->
              <view class="checkBox" v-show="isShowCheckBox"><checkbox :value="item.modelNumber" color="#ffb612" selectedColor="#ffb612" /></view>
              <view class="list-right">
                <view class="list-head" @click="choice(index)"></view>
                <view class="list-head" @click="choice(index)"></view>
                <view class="list-head" @click="choice(index)"></view>

                <!-- <view class="list-da"> -->
                <view class="row">
                  <view class="list-name" style="font-size: 18px;">{{ item.machineTypeName }}</view>

                  <view class="list-name" style="color: #cac8ca;">{{ item.modelNumber }}</view>
                </view>
                <view class="row">
                  <view class="list-name" style="color: #fff;">{{ item.specificationName }}</view>
                  <view class="list-name" style="color: #cac8ca;">{{ item.manufacturerName }}</view>
                </view>

                <!-- </view> -->
              </view>
            </view>
          </view>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>

<script>
import { getEquipmentListAllApi, delMyEquimentApi } from '@/api/equipment.js';
export default {
  data() {
    return {
      list: [],
      selectId: [],
      isShowCheckBox: false,
      isSelectArr: []
    };
  },
  methods: {
    back() {
      if (this.isShowCheckBox) {
        this.isShowCheckBox = false;
      } else {
        uni.switchTab({
          url: '/pages/mine/mine'
        });
      }
    },
    //选择课程
    choice(index) {
      if (this.list[index].selected == true) {
        this.list[index].selected = false;
        //取消选中时删除数组中的值
        for (var i = 0; i < this.selectId.length; i++) {
          if (this.selectId[i] === this.list[index].course_id) {
            this.selectId.splice(i, 1);
          }
        }
      } else {
        this.list[index].selected = true;
        this.selectId.push(this.list[index].course_id);
      }
    },
    showDel() {
      if (!this.list.length) {
        uni.showToast({
          title: '暂无可删除设备',
          icon: 'error'
        });
        return;
      }
      this.isShowCheckBox = true;
    },
    goAdd() {
      uni.navigateTo({
        url: '/pages/equipment/addEquipment'
      });
    },
    getCheckChange(v) {
      this.isSelectArr = v.detail.value;
    },
    isDelFn() {
      if (!this.isSelectArr.length) {
        uni.showToast({
          title: '请选择设备后写再进行删除',
          icon: 'none'
        });
        return;
      }
      this.delMyEquiment();
    },
    init() {
      this.getEquipmentListAll();
    },
    async getEquipmentListAll() {
      try {
        const { data } = await getEquipmentListAllApi();
        if (data.data) {
          this.list = data.data;
        } else {
          this.list = [];
          return;
        }
      } catch (e) {
        //TODO handle the exception
        uni.showToast({
          title: data.message,
          icon: 'error'
        });
      }
    },
    async delMyEquiment() {
      let that = this;
      const res = await delMyEquimentApi(this.isSelectArr);
      if (res.data.code == 200) {
        that.getEquipmentListAll();
        setTimeout(() => {
          uni.showToast({
            title: res.data.message,
            icon: 'success',
            success: function() {}
          });
        }, 100);
      }

      this.isShowCheckBox = false;
    },

    //提交
    sure() {
      //提交选中的值
      if (this.selectId.length == 0) {
        alert('请选择');
        return false;
      }
      var listIds = this.selectId.join(',');
    }
  },
  onLoad() {
    this.init(); //在load中调用初始化需要的方法
    uni.$on('loginSuccess', res => {
      this.init(); //监听到登录成功之后重新初始化(任何页面执行 uni.$emit("loginSuccess", true) 后会就触发)
    });
    // setTimeout(() => {
    //   this.init();
    // }, 100);
  }
};
</script>

<style lang="scss" scoped>
.index {
  background-color: #333333;
  height: 100vh;
  .header {
    color: #ffb612;
    display: flex;
    justify-content: space-between;
    padding: 20rpx 10rpx;
    padding-top: 80rpx;
    align-items: center;
    background-color: #4f4f4f;
    .title {
      color: #ffb612;
    }
    .right {
      .del {
        position: relative;
        bottom: -5rpx;
      }
    }
  }
  ::v-deep .uni-checkbox-input {
    border-radius: 50% !important;
    background: unset;
    border-color: #ffb612;
  }
}
/* 已选择 */
.selde {
  border: 1px solid red;
  background: red;
  color: #ffffff;
  border-radius: 20upx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 20upx;
  padding: 0 10upx;
}

.selde-q {
  width: 18upx;
  height: 18upx;
  border-radius: 50%;
  background-color: #333333;
  margin-left: 6upx;
}

/* 未选择 */
.noselde {
  border: 1px solid #959595;
  background: #ffffff;
  color: #959595;
  border-radius: 20upx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 20upx;
  padding: 0 10upx;
}

.noselde-q {
  border: 1px solid #959595;
  width: 16upx;
  height: 16upx;
  border-radius: 50%;
  background: #333333;
  margin-left: 6upx;
}
.list-box {
  display: flex;
  flex-direction: column;
  background-color: rgb(79, 79, 79);
  margin: 0upx 16upx 30upx 16upx;
  padding: 16upx;
  border-radius: 10upx;
}

.list-ed {
  color: rgb(255, 182, 18);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.list-left {
  margin-right: 16upx;
}

.list-img {
  width: 160upx;
  height: 160upx;
  margin: 0upx 16upx 0upx 0upx;
}

.list-right {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 130upx; */
}

.list-right-img {
  width: 140upx;
  height: 38upx;
}

.noadsop {
  width: 120upx;
  height: 32upx;
}

.list-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0upx;
}

.list-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 0upx;
}

.list-da {
  display: flex;
  flex-direction: row;
  font-size: 15upx;
}

.list-da view {
  width: 100%;
}

.list-da view text {
  color: #959595;
}
.row {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.sure {
  background: #ff6000;
  color: #959595;
  width: 600upx;
  height: 70upx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 40upx;
  margin: 60upx auto;
}
</style>
